<template>
	<view class="edit_userinfo_wrapper">
		<view class="user_item">
			<label class="word">原手机号</label>
			<input class="disabled" type="text" v-model="oldPhone" disabled />
		</view>
		<view class="user_item">
			<label class="word">新手机号</label>
			<input type="text" v-model="formParams.newphone" />
		</view>
		<button class="submit" @click="submit">提交</button>
	</view>
</template>

<script>
	import { api_setUserPhone } from '@/api/api'
	export default {
		data(){
			return {
				oldPhone: '',
				formParams: { newphone: '' },
				rules: {
					newphone: { reg: /^1[3-9]\d{9}$/,name: 'tel',label: '手机号',msg: '手机号不合法' },					
				},
			}
		},
		onLoad(options){			
			this.init(options);
		},
		created(){
		},
		methods: {
			init(opt){	//	页面初始化
				this.oldPhone = opt.phone;
			},
			submit(){	// 提交
				let bool = this.validField(this.formParams,this.rules);
				let query = { newphone: this.formParams.newphone }
				if (bool){
					api_setUserPhone(query).then(res => {
						uni.showToast({ title: res.msg,icon: res.code == 1 ? 'success' : 'error' });
						res.code == 1 && uni.navigateBack(-2);
					}).catch(err => console.log(err));
				}
			},
			validField(obj,reg){	// 验证表单相关字段值
				let keys = Object.keys(obj);
				let initNum = 0;
				function recur(arr, i) {
				    let n = arr[i];						
				    if (obj[n].length > 0) {
				        if (!reg[n]['reg'].test(obj[n])) {
				            uni.showToast({ title: reg[n]['msg'],icon: 'error' });
				            return false;
				        }				        
				        i++;
				        if (i < arr.length) {
				            return recur(arr, i);
				        } else {
				            return true;
				        }
				    } else {
				        uni.showToast({ title: `${reg[n].label}不能为空`,icon: 'error' });
				        return false;
				    }
				}
				return recur(keys,initNum);
			}
		},		
	}
</script>

<style lang="scss" scoped>
.edit_userinfo_wrapper{
	height: calc(100vh - 100px);
	padding: 0 10px;
	box-sizing: border-box;
	position: relative;
	.user_item{
		display: flex;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
		border-bottom: 1px solid #fafafa;
		.word{
			margin: 0 10px 0 0;
			font-size: 14px;
			color: #333;
		}
		input{
			font-size: 13px;
			color: #666;
		}
		.disabled{
			color: #ccc;
		}
	}
	.submit{
		width: 120px;
		font-size: 14px;
		color: #666;
		position: absolute;
		left: 50%;
		bottom: 40px;
		transform: translate(-50%,0);
		&::after{
			border: none;
		}
	}
}
</style>